<template>
  <a-select :disabled="disabled" :mode="mode" @change="changeHandler" placeholder="请选择" v-model="value">
    <a-select-option
      :key="item.key"
      :value="item.value"
      v-for="item in options">
      {{ item.label }}
    </a-select-option>

  </a-select>

</template>

<script>
// 区域选择

export default {
  model: {
    prop: 'outValue',
    event: 'change'
  },
  props: {
    outValue: {
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    mode: {
      type: String,
      default: 'default'
    }
  },
  data () {
    return {
      value: null,
      options: []
    }
  },
  watch: {
    // outValue() {
    //   this.value = this.outValue
    // }
  },
  mounted () {
    this.$axios
      .post(this.$URLMAP.url.role.query, { _search: false })
      .then((response) => {
        if (response.code === 200) {
          this.options = response.data.map(item => {
            return {
              label: item.roleName,
              value: item.id,
              key: item.id
            }
          })
        }
        if (this.outValue != null) {
          this.value = this.outValue
        } else {
          if (this.mode === 'multiple') {
            this.value = []
          } else {
            this.value = null
          }
        }
        this.$emit('change', this.value)
      })
  },
  methods: {
    changeHandler (input) {
      this.$emit('change', input)
    }
  }
}
</script>

<style>
</style>
